<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <title>评价商品-{eyou:global name='web_name' /}</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
        <link href="{eyou:global name='web_cmspath'/}/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        {eyou:static file="users/skin/css/basic.css"/}
        {eyou:static file="users/skin/css/eyoucms.css"/}
        <!-- 新样式 2020-12-8 -->
        {eyou:static file="users/skin/css/element/index.css" /}
        {eyou:static file="users/skin/userfont/iconfont.css" /}
        {eyou:static file="users/skin/css/e-user.css" /}
        {eyou:include file="users/skin/css/diy_css.htm"/}
        {eyou:static file="/public/static/common/js/jquery.min.js"/}
        {eyou:static file="/public/plugins/layer-v3.1.0/layer.js"/}
        {eyou:static file="/public/static/common/js/tag_global.js"/}
        {eyou:static file="/public/static/common/js/mobile_global.js"/}
    </head>

    <body>
        <div class="ey-header-status">
            <div class="header-status-l">
                <a href="javascript:history.go(-1);"><i class="el-icon-arrow-left"></i></a>
            </div> 
            <div class="header-status-m">评价商品</div> 
            <div class="header-status-r">
                <a href="{eyou:url link='user/Users/index' /}"><i class="el-icon-user"></i></a>
            </div>
        </div>
        <div class="h50"></div>

        <div class="ey-container">
            <form id="post_form">
                <input type="hidden" name="order_id" value="{$eyou.field.order_id}" />
                <input type="hidden" name="order_code" value="{$eyou.field.order_code}" />
                <input type="hidden" name="details_id" value="{$eyou.field.details_id}" />
                <input type="hidden" name="product_id" value="{$eyou.field.product_id}" />

                <div class="el-row p10 bgfff mt10">
                    <div class="column-title">
                        <div class="column-title-l">订单信息</div>
                        <div class="column-title-r">订单号：{$eyou.field.order_code}</div> 
                    </div>
                    <div class="mb10 order-goods goods-con">
                        <div class="goods-item">
                            <div class="item-main">
                                <div class="item-con">
                                    <div class="item-con-l">
                                        <a href="{$eyou.field.arcurl}"><img src="{$eyou.field.litpic}" style="width: 75px; height: 75px;"></a>
                                    </div>
                                    <div class="item-con-m">
                                        <a href="{$eyou.field.arcurl}">{$eyou.field.product_name}</a>
                                        <div class="f12 fc9">
                                            {eyou:volist name='$eyou.field.product_spec_list' id='spec'}
                                                {$spec.value}&nbsp;
                                            {/eyou:volist}
                                        </div>
                                        <div class="price-info mt5">
                                            <span class="users_price"><i class="f12">￥</i>{$eyou.field.product_price}</span>
                                            <span class="product_num"><i class="f12">x</i>{$eyou.field.num}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="el-row p10 bgfff mt10">
                    <div class="column-title"><div class="column-title-l">评价信息</div> <div class="column-title-r"></div></div>
                    <div class="mb10 order-goods goods-con">
                        <div class="item-from-flex">
                            <div class="item-tit">评价评分：</div>
                            <div class="item-con">
                                <div class="ey-start-ment curpoin">
                                    <input type="hidden" name="newCommnet" value="1">
                                    <input type="hidden" name="total_score" id="total_score" value="5">
                                    <i class="iconfont icon-xingxing active" onclick="totalScore(0);"></i>
                                    <i class="iconfont icon-xingxing active" onclick="totalScore(1);"></i>
                                    <i class="iconfont icon-xingxing active" onclick="totalScore(2);"></i>
                                    <i class="iconfont icon-xingxing active" onclick="totalScore(3);"></i>
                                    <i class="iconfont icon-xingxing active" onclick="totalScore(4);"></i>
                                </div>
                            </div>
                        </div>

                        <div class="item-from-flex">
                            <div class="item-con">
                                <textarea rows="5" cols="35" name="content" class="fs16" style="height: 100%; width: 100%; font-size: 16px;" maxlength="400" onkeyup="setval(this, '400')" placeholder="请在此处输入您的评价"></textarea>
                            </div>
                        </div>
                        <div class="fcb f12" style="text-align: right;"> <i id="CommentContentWordCount">400</i> / 400</div>

                        <div class="item-from-flex">
                            <div class="item-con ">
                                <div class="images_upload_main" id="tab_dl_upload_img">
                                    <a href="javascript:void(0);" onclick="GetUploadify(6, '', 'allimg', 'UploadImgCallBack', '', '评价晒单', 1);" class="el-button el-button--primary is-plain el-button--small">
                                       <i class="el-icon-picture"></i>上传图片</a>
                                </div>
                            </div>
                        </div>
                        <div class="item-from-flex border-b-no" id="dl_upload_img" data-numlimit="6">
                            <div class="item-con" style="margin-left: 1px;">
                                <div class="images_upload_main" id="tab_dl_upload_img">
                                    <div class="sort-list ui-sortable">
                                        <div class="fieldext_upload ui-sortable-handle" style="display: none;"></div>
                                    </div>
                                </div>
                                <!-- 上传图片显示的样板 start -->
                                <div class="upload_img_upload_tpl" style="display: none;">
                                    <div class="fieldext_upload">
                                        <div class="images_upload_item">
                                            <input type="hidden" name="upload_img[]">
                                            <a href="javascript:void(0);">
                                                <img src="/public/static/admin/images/add-button.jpg" width="70" height="70">
                                            </a>
                                            <a class="delete" href="javascript:void(0)">&nbsp;&nbsp;</a>
                                        </div>
                                    </div>
                                </div>
                                <!-- 上传图片显示的样板 end -->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="ey-row">
                    <input type="button" onclick="SubmitData(this);" data-url="{$eyou.SubmitUrl}" class="el-button el-button--primary wb100" value="提交评价"/>
                </div>
            </form>
        </div>
    </body>
</html>

<script type="text/javascript">
    // 上传图片路径
    var GetUploadify_url = "{:url('Uploadify/upload')}";

    // 判断内容填写和评分
    function setval(obj, sum) {
        var len = $(obj).val().length;
        var textarea = $('#CommentContentWordCount');
        if(len > sum) {
            $(obj).val($(obj).val().substring(0,sum));  //截取规定长度字符串
        }
        var num = sum - len;
        num <= 0 ? textarea.text(0): textarea.text(num);  //防止出现负数
    }

    // 评分设置
    function totalScore(score) {
        // 删除所有评分选中效果
        $('.icon-xingxing').removeClass('active');
        // 追加当选评分
        $('.icon-xingxing').each(function(idx, ele) {
            $('.icon-xingxing').eq(idx).addClass('active');
            if (idx == score) {
                $('#total_score').val(score+1);
                return false;
            }
        });
    }

    // 上传多图回调函数
    function UploadImgCallBack(paths) {
        var last_div = $(".upload_img_upload_tpl").html();
        var obj = $('#dl_upload_img');
        for (var i = 0; i < paths.length; i++) {
            // 若可上传数量为0则执行返回
            var num = obj.attr('data-numlimit');
            if (0 == num) return false;
            num = Number(num) - 1;
            obj.attr('data-numlimit', num);

            obj.find(".fieldext_upload:eq(0)").before(last_div);
            obj.find(".fieldext_upload:eq(0)").find('input').val(paths[i]);
            obj.find(".fieldext_upload:eq(0)").find('a:eq(0)').attr('href', paths[i]).attr('target', "_blank");
            obj.find(".fieldext_upload:eq(0)").find('img').attr('src', paths[i]);
            obj.find(".fieldext_upload:eq(0)").find('a:eq(1)').attr('onclick', "UploadImgDel(this, '"+paths[i]+"')").text('删除');
        }             
    }

    // 上传之后删除组图input
    function UploadImgDel(obj,path) {
        $(obj).parent().remove();
        $.ajax({
            type: 'POST',
            url : GetUploadify_url,
            data: {action:"del", filename:path, '_ajax':1},
            success:function(){
                var img_obj = $('#dl_upload_img');
                var num = img_obj.attr('data-numlimit');
                num = Number(num) + 1;
                img_obj.attr('data-numlimit', num);
            }
        });  
    }

    // 提交申请
    function SubmitData(obj) {
        if ($("#total_score").val()=='') {
            layer.msg('请选择评价评分！');
            return false;
        }

        layer_loading('正在处理');
        $.ajax({
            url: $(obj).data('url'),
            data: $('#post_form').serialize(),
            type:'post',
            dataType:'json',
            success:function(res){
                layer.closeAll();
                if (1 == res.code) {
                    layer.msg(res.msg, {time: 1500}, function() {
                        window.location.href = res.url;
                    });
                } else {
                    layer.msg(res.msg);
                }
            },
            error : function(e) {
                layer.closeAll();
                layer.alert(e.responseText, {title:false, icon:5, closeBtn: 0});
            }
        });
    }
</script>
